<template>
    <h3>发布轮播图</h3>
    <div class="banner_add_form">
        <div class="opt">
            <el-input v-model="title" style="width: 360px; height: 44px; font-size: 16px" placeholder="轮播图标题" />
        </div>
        <div class="opt">
            <el-input v-model="href" style="width: 360px; height: 44px; font-size: 16px" placeholder="轮播图链接" />
        </div>
        <div class="opt">
            <!-- 上传文件组件 -->
            <el-upload class="avatar-uploader" drag action="#" :on-change="chooseImageFn" :auto-upload="false"
                :show-file-list="false">
                <img v-if="imgUrl" :src="imgUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
            <div v-if="imgUrl" style="width: 178px; text-align: center; margin-top: 5px">
                <el-button @click="removeFn(imgUrl)" type="danger" plain>删除图片</el-button>
            </div>
        </div>
        <div class="opt">
            <el-button @click="addBannerFn" type="primary" size="large">上传轮播图</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive,ref } from 'vue'
    import { addBannerFunc,removePhotoFunc,addPhotoFunc } from '../../api/request'
    import { ElMessage, ElMessageBox } from 'element-plus';
    let title = ref('')
    let href = ref('')
    let picUrl = ref('')
    let imgUrl = ref('')

    
    // 选择图标
    const chooseImageFn = async (file: any) => {
        if (file) {
            // 创建表单实例
            let fd = new FormData()
            fd.append('photo', file.raw)
            // 调用上传图片的方法
            await addPhotoFunc(fd)
                .then(
                    content => {
                        // console.log(content)
                        let { code, picUrl } = content.data;
                        if (code == 200) {
                            // 赋值（响应式）
                            imgUrl.value = picUrl;
                        }
                        else {
                            ElMessage.error(content.data.msg);
                        }
                    }
                )
        }

    }


    // 删除图片的方法
    const removeFn = (content: any) => {
        //  console.log('2.0', content)
        //  console.log('3.0', content.response.picUrl)
        let src = content;
        if (src) {
            removePhotoFunc({ picUrl: src })
                .then(
                    (content: any) => {
                        // console.log(111,content)
                        if (content.data.code == 200) {
                            picUrl.value = "";
                            imgUrl.value = "";
                            // console.log(imgUrl);
                        }
                    }
                )
        }
    }
    


    // 发布轮播图
    const addBannerFn = async () => {
        //发布轮播
        await addBannerFunc({
            banner_picUrl: imgUrl.value,
            banner_href: href.value,
            banner_title: title.value
        })
        .then(
            (content: any) => {
                // console.log(content);
                if (content.data.code == 200) {
                    ElMessage.success(content.data.msg)
                    // 隐藏弹窗(重置表单信息)
                    picUrl.value = "";
                    imgUrl.value = "";
                    href.value = "";
                    title.value = "";
                    // 重新获取轮播图数据列表
                }
                else {
                    ElMessage.error(content.data.msg)
                }
            }
        )
        .catch(
            err => {
                ElMessage.error(err.msg)
            }
        )
    } 
</script>

<style lang="scss">
.banner_add_form {
    .opt {
        margin-top: 15px;
    }
}

.avatar-uploader-icon,
.el-upload-dragger,
.avatar-uploader{
    width: 400px;
    height: 400px;
    // display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 400px;
    text-align: center;
    padding: 0 !important;
    line-height: 400px;
}

.avatar{
    width: 300px;
    display: block;
    padding: 0 !important;
}
</style>